<template>
  <div class="login_container">
    <div class="middle">
      <div class="left"></div>
      <div class="right">
        <el-form class="form" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>欢迎登录平台</h1>
          <h2>Welcome to the platform</h2>
          <el-form-item prop="username">
            <el-input type="text" class="username" placeholder="请输入您的账号" :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" class="password" placeholder="请输入您的密码" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="button" @click="login"></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue';
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { ElNotification } from 'element-plus';
//引入用户相关的小仓库
import useUserStore from '@/store/modules/user';
import { useRouter } from 'vue-router';

let $router = useRouter();
let userStore = useUserStore();
//获取el-form组件
let loginForms = ref();
//获取路由对象
// let $route = useRoute();
//定义变量控制按钮的加载效果
let loading = ref(false);
//收集账号于密码的数据
let loginForm = reactive({ username: 'admin', password: '111111' });
//登录按钮的回调
const login = async () => {
  //保证全部表单校验通过再发请求
  await loginForms.value.validate();

  loading.value = true;
  //通知仓库发登录请求
  //请求成功->首页展示数据的地方
  //请求失败->弹出登录失败信息
  try {
    //保证登录成功
    await userStore.userLogin(loginForm);
    //编程式导航跳转展示数据首页
    //判断登录的时候，路径当中是否有query参数,如果有就往query参数跳转，没有就跳转到首页
    // let redirect: any = $route.query.redirect;
    // $router.push({ path: redirect || '/' });
    $router.push('/system');
    //登录成功加载效果消失
    loading.value = false;
  } catch (error) {
    userStore.userLogout();
    //登录成功加载效果消失
    loading.value = false;
    //登录失败的提示信息
    ElNotification({
      type: 'error',
      message: (error as Error).message,
    });
  }
};
//定义表单校验需要的配置对象
const rules = {
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
};

// $￥-------------------------Scale适配方案-------------------------￥$
const setScale = (designWidth: number, designHeight: number) => {
  const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight ? document.documentElement.clientWidth / designWidth : document.documentElement.clientHeight / designHeight;

  document.querySelector<HTMLDivElement>('.middle')!.style.transform = `scale(${scale})`;
};
function resizeFun() {
  setScale(1920, 923);
}

onMounted(() => {
  setScale(1920, 923);
});
window.addEventListener('resize', resizeFun);

onUnmounted(() => {
  window.removeEventListener('resize', resizeFun);
});
</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/login/bg1.png') no-repeat center top;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .middle {
    background: #fff;
    width: 1486px;
    height: 752px;
    border-radius: 20px;
    box-shadow: 0px 2px 30px 0px rgba(81, 84, 166, 0.8);
    color: #5154a6;
    display: flex;
    justify-content: center;

    .left {
      width: 716px;
      height: 752px;
      background: url('@/assets/images/login/bg22x.png') no-repeat top center/100% 100%;
    }
    .right {
      width: 770px;
      height: 752px;
      display: flex;
      justify-content: center;
      align-items: center;
      .form {
        width: 500px;
        display: flex;
        flex-flow: column;
        align-items: center;

        h1 {
          font-size: 44px;
          background-image: linear-gradient(to bottom, rgba(110, 168, 247, 1), rgba(130, 121, 230, 1));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        h2 {
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(128, 128, 128, 1);
          margin: 16px 0 80px 0;
        }
        .username,
        .password {
          width: 370px;
          height: 57px;
          border-radius: 20px;
          margin-bottom: 15px;
          font-size: 20px;
        }
        .password {
          margin-top: 15px;
          margin-bottom: 15px;
        }
        .button {
          width: 370px;
          height: 50px;
          background: url('@/assets/images/login/btn-login3x.png') no-repeat top center/100% 100%;
          border: 1px solid transparent;
          margin-top: 15px;
        }
      }
    }
  }
}
:deep(.el-input .el-input__icon) {
  width: 28px;
}

:deep(.el-icon svg) {
  height: 20px;
  width: 20px;
  font-size: 28px;
}
// 校验规则的提示
:deep(.el-form-item__error) {
  font-size: 16px;
}
</style>
